<template>
    <div>
        <el-form :inline="true" :model="ruleForm">
            <el-form-item label="手机号">
                <el-input placeholder="请输入手机号" @click="start" v-model.lazy="ruleForm.phonenum">
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="start" type="primary">查询</el-button>
            </el-form-item>
        </el-form>

        <el-table calss="margin-top20" row-class-name="cu" :data="tableData" border height="80vh" style="width: 100%"
            @current-change="(e) => getinfo(e)">
            <el-table-column label="手机号" prop="phonenum">
            </el-table-column>
            <el-table-column label="与账号关系" prop="relationship">
            </el-table-column>
            <el-table-column label="绑定账号" prop="user.name">
            </el-table-column>
            <el-table-column label="首次绑定时间" prop="createdAt">
                <template #default="scope">
                    {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pager" @current-change="handleCurrentChange" :page-size="Number(limit)"
            layout="total, prev, pager, next" :total="count">
        </el-pagination>

        <el-dialog v-model="updatetop" title="账号详情" width="700px">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    账号详情
                </span>
            </template>
            <!-- <div class="p-2" v-for="(v, k) in user" :key="k">
                <div>OJ账号: {{ v.name }}</div>
                <div>手机号: {{ v.phonenum }}</div>
                <div>上次登录时间: {{ dayjs(v.lasttime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                <div>最近做题时间: {{ dayjs(v.userquestiontime).format('YYYY-MM-DD HH:mm:ss') }}</div>
                <div>团队: {{ v.teamuser?.map((e: any) => e.team.name).join('，') }}</div>
                <div>答题次数: {{ v.userquestioncount }}</div>
                <div>答题正确率:
                    {{ v.userquestionaccount ? Math.floor(v.userquestionaccount / v.userquestioncount * 100) : 0 }}
                </div>
                <div>备注: {{ v.remarks }}</div>
            </div> -->
            <!--  -->
            <el-descriptions class="card-descriptions" :column="2" v-for="(v, k) in user" :key="k" :title="v.name"
                extra="" size="default">
                <template #title>
                    {{ v.name }}
                </template>
                <el-descriptions-item :span="2" label="OJ账号:">
                    <el-text size="default" type="info"> {{ v.name }} </el-text>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="手机号:">
                    <el-text size="default" type="info"> {{ v.phonenum }} </el-text>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="上次登录时间:">
                    <el-text size="default" type="info"> {{ dayjs(v.lasttime).format('YYYY-MM-DD HH:mm:ss') }}
                    </el-text>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="最近做题时间:">
                    <el-text size="default" type="info"> {{ dayjs(v.userquestiontime).format('YYYY-MM-DD HH:mm:ss')
                        }}
                    </el-text>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="团队:">
                    <el-tag class="question-label" size="default" type="primary" v-for="(vv, kk) in v.teamuser"
                        :key="kk">
                        {{ vv.team?.name }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="答题次数:">
                    <el-text size="default" type="info"> {{ v.userquestioncount }}
                    </el-text>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="答题正确率:">
                    <el-text size="default" type="info">
                        {{ v.userquestionaccount ? Math.floor(v.userquestionaccount / v.userquestioncount * 100) : 0 }}
                    </el-text>
                </el-descriptions-item>
                <el-descriptions-item :span="2" label="备注:">
                    <el-text size="default" type="info"> {{ v.remarks }} </el-text>
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="updatetop = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ElMessage, dayjs } from "element-plus";
import { computed, onMounted, reactive, ref, watch } from "vue";
import { useStore } from "vuex";
import { Iobj, asyncselectzhimahuuser } from "../../../api/index";
import { Storekey } from "../../../interface";
import study from "../../../mysql_interface/studycodemodel";

const store = useStore(Storekey)

const ruleForm = reactive({
    phonenum: ''
})

const sortable = ref('DESC')
const limit = ref(20)
const offset = ref(0)
const order = ref('phonenum')
const updatetop = ref(false)
const user = computed(() => {
    return store.state.users?.rows || []
})
const index = ref<study.Izhimahuuser>()

async function getinfo(row: any) {
    await store.dispatch('actionusers', {
        ID: row.userid
    })
    index.value = row
    updatetop.value = true
}



const tableData = ref<study.Izhimahuuser[]>([])

const count = ref(0)
onMounted(() => {
    start()
})

async function start() {
    try {
        const query: Iobj<study.Izhimahuuser> = Object.assign(
            {
                _limit: limit.value,
                _offset: offset.value,
                _order: order.value,
                _sortable: sortable.value,
                phonenum: ruleForm.phonenum
            }
        );
        const data = await asyncselectzhimahuuser(query)
        tableData.value = data.rows
        count.value = data.count
    } catch (e: any) {
        ElMessage.error(e);
    }
}

function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}






watch(() => offset.value, () => {
    start()
})

</script>